<template>
	<view>
		<view class="search">
			<image :src="ossUrl + `/static/25.png`" mode=""></image>
			<input type="text" placeholder="输入姓名/公司/教练职称" placeholder-class="search-ac" v-model="params.nickname" @input="reload"/>
		</view>
		<view class="list" v-if="list.length > 0">
			<view class="list-item" v-for="it in list" :key="it.id">
				<view class="list_item">
					<image class="list_item-img" :src="it.head" style="border-radius: 50%;"  @click="toMixinIndex(1,{userId: it.id})"></image>
					<view class="list_item-content" @click="setKeys(it.id)">
						<view class="list_item-content-h">
							<view class="list_item-content-h-name">
								{{it.nickname}}
								<image
									:src="ossUrl + `/static/setting/${it.user.sex === '女' ? '7' : '6'}.png`"
									mode=""></image>
							</view>
							<view class="list_item-content-h-address">
								<image :src="ossUrl + `/static/card/2.png`" mode=""></image>
								{{it.address}} 
							</view>
						</view>
						<view class="list_item-content-subTitle">
							{{it.identity || ''}}
							<text v-if="it.count > 0">最近访问了你{{it.count}}次</text>
						</view>
						<view class="list_item-content-address">{{it.company}}</view>
					</view>
					<view class="list_item-rig" @click="setKeys(it.id)">
						<image :src="keys.includes(it.id) ? ossUrl + '/static/image/g.png' : ossUrl + `/static/1.png`" mode=""></image>
					</view>
				</view>
			</view>
		</view>
		<view class="noData" style="padding-bottom:120rpx;" v-else>
			<u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png" />
		</view>
		<view class="btn" @click="submit">确定</view>
	</view>

</template>

<script>
	import {
		InformationUserTimeAxisFriend,InformationUserPrivacySetUp
	} from '@/common/http/api.js'
	export default {
		data(){
			return {
				//分页
				params: {
					// page: 1,
					// visits:'desc',
					nickname: ''
				},
				isList: true,
				list: [],
				keys: []
			}
		},
		onLoad() {
			this.reload()
		},
		methods:{
			setKeys(id){
				if(this.keys.includes(id)) {
					this.keys = this.keys.filter(i=> i != id)
				} else {
					this.keys.push(id)
				}
			},
			reload() {
				this.params.page = 1
				this.list = []
				this.keys = []
				this.init()
			},
			init() {
				uni.showLoading()
				InformationUserTimeAxisFriend(this.params).then(res => {
					uni.hideLoading()
					this.keys = res.data.filter(i=> i.state == 1).map(i=>i.id)
					this.list = res.data
				})
			},
			submit(){
				
				 
				let data = {
					TimeAxisList: this.keys.join(',')
				}
				uni.showLoading()
				InformationUserPrivacySetUp(data).then(res => {
					uni.hideLoading()
					uni.showToast({duration:3000,
						title: '保存成功！',
						icon:'none'
					});
					this.$store.commit('setIsRefresh', true)
					setTimeout(()=>{
						uni.navigateBack()
					},1500)
				})
				
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #F6F7F8;
	}

	.search {
		width: 656rpx;
		height: 70rpx;
		background: #FFFFFF;
		border-radius: 40rpx;
		margin: 34rpx auto;
		box-sizing: border-box;
		padding: 16rpx 23rpx;
		display: flex;
		align-items: center;
		background: white;

		image {
			width: 40rpx;
			height: 40rpx;
			margin-right: 7rpx;
		}

		input {
			flex: 1;
			min-width: 0;
			font-family: PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #999999;
		}

		.search-ac {
			font-family: PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #999999;
		}
	}

	.list {
		width: 100%;
		padding-bottom: 150rpx;
		.list-item {
			width: 100%;
			border-bottom: 10rpx solid #F6F7F8;
			background: #FFFFFF;

			.list_item {
				box-sizing: border-box;
				padding: 39rpx 49rpx;
				display: flex;
				align-items: center;

				.list_item-img {
					width: 100rpx;
					height: 100rpx;
					margin-right: 13rpx;
				}

				.list_item-content {
					width: 400rpx;

					.list_item-content-h {
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin-bottom: 16rpx;

						.list_item-content-h-name {
							display: flex;
							align-items: center;
							font-family: PingFang SC;
							font-weight: 400;
							font-size: 30rpx;

							image {
								margin-left: 14rpx;
								width: 26rpx;
								height: 26rpx;
							}
						}

						.list_item-content-h-address {
							display: flex;
							align-items: center;
							font-family: PingFang SC;
							font-weight: 300;
							font-size: 24rpx;
							color: #7A7A7A;

							image {
								margin-right: 10rpx;
								width: 30rpx;
								height: 30rpx;
							}
						}
					}

					.list_item-content-subTitle {
						font-family: PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #666666;
						display: flex;
						align-items: center;
						margin-bottom: 17rpx;

						text {
							font-family: PingFang SC;
							font-weight: 400;
							font-size: 22rpx;
							color: #12B475;
							margin-left: 36rpx;
						}
					}

					.list_item-content-address {
						min-width: 0;
						font-family: PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #666666;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
						//height: 23rpx;
					}
				}

				.list_item-rig {
					flex: 1;
					min-width: 0;
					display: flex;
					align-items: center;
					justify-content: flex-end;

					image {
						width: 34rpx;
						height: 34rpx;
					}
				}
			}
		}
	}
	.btn {
		width: 660rpx;
		height: 86rpx;
		background: #12B475;
		border-radius: 43rpx;
		position: fixed;
		left: 55rpx;
		bottom: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-family: PingFang;
		font-weight: 500;
		font-size: 28rpx;
		color: #FFFFFF;
	}
</style>